<template>
  <div class="wxVideo">
    <div class="wx-video-box" @click="videoDialog=true">
      <i class="el-icon-video-play"/>
    </div>
    <el-dialog :visible.sync="videoDialog" width="60%">
      <video class="video" :src="videoURL" controls="controls" autoplay="autoplay" width="100%" height="100%"></video>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "wxVideo",
  props: ['url'],
  watch: {
    url: {
      immediate: true,
      handler(newVal, oldVal) {
        this.videoURL = newVal
      }
    }
  },
  data() {
    return {
      videoDialog: false,
      videoURL: this.url
    }
  },
  methods: {}
}
</script>

<style scoped lang="scss">
.wxVideo {
  .wx-video-box {
    width: 100px;
    height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #000;
    cursor: pointer;

    i {
      color: #fff;
      font-size: 24px;
    }
  }

  .video {
    margin-top: 10px;
    margin-right: 10px;
  }
}
</style>
